<template>
<!--    <i class="xq-icon" v-bind="props" @click="handleIcon" ref="i">-->
    <i class="xq-icon"  :class="{ [`xq-icon--${type}`]: type }">
        <font-awesome-icon v-bind="props" />
    </i>
</template>

<script lang="ts" setup>
    // import { ref } from "vue";
    defineOptions({
        name: "XqIcon"
    });

    interface IProps {
        icon: string, // 图标
        size?: string, // 大小
        rotation?: string | number, // 旋转
        flip?: string | number, // 翻转
        // 动画效果相关属性
        beat?: boolean,
        'beat-fade'?: boolean,
        bounce?: boolean,
        fade?: boolean,
        shake?: boolean,
        spin?: boolean,
        'spin-reverse'?: boolean,
        'spin-pulse'?: boolean,
        // 自定义属性
        type?: string,
        color?: string
    }
    const props = withDefaults(defineProps<IProps>(), {

    });

    // interface Test {
    //     msg: string
    // }
    // const emits = defineEmits<{
    //     'test': [Object: Test]
    // }>();
    // const i = ref(null);
    // const handleIcon = ()=> {
    //     emits('test', { msg: 'Hello'})
    //     console.log(emits);
    //     console.log("icon click", props, i);
    // }
    console.log(props);
</script>

<style lang="scss" scoped>

</style>